<template>
  <div
    class="stock_list"
    v-infinite-scroll="load"
    infinite-scroll-disabled="loading"
    infinite-scroll-delay="200"
    infinite-scroll-distance="15"
    :infinite-scroll-immediate="true"
  >
    <details
      class="warn_stock"
      v-for="(item, index) of warnStockList"
      :key="index"
    >
      <summary class="stock_s">
        <div class="stock_info1">
          <img class="type_icon1" v-if="item.market == 'HKEX'"
            :src="HKicon"
            alt=""
          />
          <img class="type_icon1" v-else-if="item.market == 'US'"
            :src="USicon"
            alt=""
          />
          <img class="type_icon1" v-else-if="item.market == 'SZSE'"
            :src="SZicon"
            alt=""
          />
          <img class="type_icon1" v-else
            :src="SHicon"
            alt=""
          />
          <span class="stock_names">{{ `${item.name} (${item.symbol})` }}</span>
          <span class="update_time">{{item.updateTime | date}}</span>
        </div>
        <div class="stock_btn">
          <div class="btn_item1" @click="edits(item)">{{$t('inccom.warn_item.56hz3c02wk80')}}</div>
          <div class="btn_item2" @click="detail(item)">{{$t('inccom.warn_item.56hz3c02x2k0')}}</div>
        </div>
      </summary>
      <!-- 展开详情 -->
      <div class="stock_detail">
        <div class="detailItem" v-if="Number(item.targetHigh) != 0">
          <p>{{ $t('inccom.warn_item.56hz3c02x700') }}</p>
          <p :class="Number(item.targetHigh) != 0 ? 'up' : '' ">{{ Number(item.targetHigh).toFixed(4) }}</p>
        </div>
        <div class="detailItem"  v-if="Number(item.targetLow) != 0">
          <p>{{ $t('inccom.warn_item.56hz3c02xa80') }}</p>
          <p :class="Number(item.targetLow) != 0 ? 'down' : ''">{{ Number(item.targetLow).toFixed(4) }}</p>
        </div>
        <div class="detailItem" v-if="Number(item.dayGain) != 0">
          <p>{{ $t('inccom.warn_item.56hz3c02xd80') }}</p>
          <p :class="Number(item.dayGain) ? 'up' : ''">{{ (item.dayGain * 100).toFixed(2) }}%</p>
        </div>
        <div class="detailItem" v-if="Number(item.dayDecline) != 0">
          <p>{{ $t('inccom.warn_item.56hz3c02xi00') }}</p>
          <p :class="Number(item.dayDecline) ? 'down' : ''">{{ (item.dayDecline * 100).toFixed(2) }}%</p>
        </div>
      </div>
    </details>
    <p class="more" v-if="loading && !finished">{{ $t("m.Loading") }}</p>
    <p v-if="finished" class="more">{{ $t("m.No_more") }}</p>
  </div>
</template>

<script>
import dayjs from "dayjs";
import {get_warn_list} from '@/assets/js/API/user.js';
import {post_delete_warn} from '@/assets/js/API/user.js';
export default {
  props: {
    type: String,
    total: Number
  },
  inject: ["reload"],
  filters: {
    date(val) {
      return dayjs(val * 1000).format("YYYY-MM-DD  HH:mm");
    },
  },
  data() {
    return {
      HKicon: require("@/assets/img/icon_hk.png"),
      USicon: require("@/assets/img/icon_us.png"),
      SHicon: require("@/assets/img/icon_sh.png"),
      SZicon: require("@/assets/img/icon_sz(1).png"),
      loading: true,
      finished: false, // 请求完成
      warnStockList: [],
      page: 1, // 沪深预警请求页数
    };
  },
  mounted() {
    this.warnStockList = [];
    this.page = 1;
    this.getWarnList(this.page, this.type);
  },
  methods: {
    edits(item) {
      this.$emit("edit", item);
    },
    init() {
      this.warnStockList = [];
      this.page = 1;
      this.loading = true;
      this.finished = false;
    },
    load() {
      this.loading = true;
      this.getWarnList(this.page, this.type);
    },
    // stockSortKey: 0: 全部预警，1： 香港股票预警， 2： 美股预警， 3：沪深预警
    async getWarnList(page, type) {
      if(!this.finished) {
        const res = await get_warn_list({
            page,
            type: this.type
          });
        if(res.code != 1) return this.$message.error(res.msg);
        if (res.data.list.length > 0) {
          this.warnStockList = [...this.warnStockList, ...res.data.list];
          this.page++;
          this.$emit("totalChange",res.data.totalCount, type)
        } else {
          this.finished = true;
        }
        this.loading = false;
      }
    },
    // 删除预警
    async detail(item) {
      const res = await post_delete_warn({
          id: item.id
      });
      if(res.code != 1) return this.$message.error(res.msg);
      this.init();
      this.getWarnList(this.page, this.type);
      this.$store.dispatch('SetEarlyWarningNum',this.$store.state.index.EarlyWarningNum+1)
      this.reload();
      return this.$message.success(res.msg);
    }
  },
};
</script>

<style lang="less">
.stock_list {
  height: 300px;
  overflow: auto;
  .warn_stock {
    position: relative;
    padding-right: 16px;
    ::-webkit-details-marker {
      display: none;
    }
    ::-moz-list-bullet {
      font-size: 0;
    }
    &:not([open]) {
      summary::after {
        transform: rotate(-90deg);
      }
    }
    .stock_s {
      padding-top: 8px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      &::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        background: url(../../../assets/img/icon_xx1.png) no-repeat;
        background-size: 100% 100%;
        transition: transform 0.2s;
      }
      .stock_btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .btn_item1 {
          color: @hoverColor;
          padding-right: 25px;
          cursor: pointer;
        }
        .btn_item2 {
          cursor: pointer;
          color: @fff;
        }
      }
    }
    .stock_detail {
      padding-left: 30px;
      .detailItem {
        display: flex;
        color: @fff;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        padding-top: 5px;
        .up {
          color: @red;
        }
        .down {
          color: @green;
        }
      }
    }
  }
}
.stock_info1 {
  padding-left: 30px;
  color: @fff;
  .type_icon1 {
    height: 14px;
  }
  .stock_names {
    padding-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .update_time {
    margin-left: 10px;
    color: @fbSix;
    font-size: 12px;
  }
}
</style>